- 综合排序
- 最热优先
- 最新优先
- 来自专栏卡拉云
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
[Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件] 本文首发：《Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 在本教程中，我们首先来一起搭建一个测试实例，然后在浏览器上安装 Vue DevTools，然后大家可根据教程一步一步调试自己搭建的 APP，从而熟悉使用 Vue Devtools。 Vue Devtools 对这个实例进行测试。 Vue Devtools 分为多个版本，本教程使用的演示 APP 由 Vue 3 搭建，未来的趋势也是 Vue 3，那么我们优先讲解 Vue Devtools Vue 3 的版本，即 Vue.js Devtools [02-vue-devtools-setup] 首先访问 Chrome 应用商店，然后在搜索框搜索「Vue Devtools」，找到 Vue Devtools bate 版。
6.4K30编辑于 2022-04-02 - 来自专栏前端之路
Vue-devtools安装
[推荐]Vue-devtools安装 vue-devtools是一款vue浏览器开发者工具调试插件 首先从github上将vue-devtools clone到本地 git clone https: //github.com/vuejs/vue-devtools.git 安装项目所需要的包 npm install 编译文件 npm run build 4.添加至游览器
70540发布于 2018-07-17 - 来自专栏coding个人笔记
Vue-devtools安装
最近用vue开发，需要看一下vuex的数据结构，原本也没什么，就安装了一下vue-devtools，这边重温一下安装的过程。 首先去github上面下载一个压缩包。 地址：https://github.com/vuejs/vue-devtools 这边是直接下载，另一个还没试过。 ? 解压之后得到： ? 选中目录下shells下chrome文件夹，这样就安装完成了，启动你的VUE项目，就能在开发者模式下看见： ? 这边说一下，我刚安装完，启动了项目没有出现VUE工具，重启了浏览器，然后VUE自动打开项目还是没有，我不知道是我电脑问题还是什么，必须关闭浏览器VUE项目然后重新打开，还要刷新一下才出现，本人觉得是电脑问题 经过我的测试，安装完了之后删除这个vue-devtools-dev文件夹我们安装的VUE调试工具也会删除，意思就是说这个文件是不能删除的。
70720发布于 2020-04-24 - 来自专栏老怪兽的前端之旅
（十二）使用 Vue Devtools
一、使用步骤 2. 3. 查看 actions mutations 触发
31730编辑于 2023-02-22 - 来自专栏全栈程序员必看
vue devtools使用教程_vue debug
/http' const common = { install (Vue) { this.$spi = Api this. $http = new Http(this) } } 最后在main.js引入common挂载到vue import C from 'uutils/common' Vue.use(C) 版权声明：本文内容由互联网用户自发贡献
56810编辑于 2022-11-11 - 来自专栏前端之攻略
Vue js 安装vue-devtools 原
1、有git的同学直接 git clone https://github.com/vuejs/vue-devtools，没有的话，进入github网站直接下载下来，解压 2、下载完成之后打开cmd 进入vue-devtools文件夹用命令npm install把依赖装好 之后再进行npm run build， 但是npm install往往安装不成功,先安装npm install chromedriver
70520发布于 2019-04-04 - 来自专栏全栈程序员必看
Vue调试工具安装（vue devtools）
Vue调试工具安装（vue devtools） 第一步：下载源码 在github下载devtools源码，地址： https://github.com/vuejs/vue-devtools 第二步：执行命令 下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。 cmd回车后进入到vue devtools的安装目录下。 重启进入到扩展页面就如图所示了： 第五步：测试vue devtools 打开一个已有的vue项目，运行项目，然后按F12，就可以看到多出一个Vue选项了 。 到此为止，Vue调试工具安装就已经成功并且可以使用了。 楠哥——-一心想为IT行业添砖加瓦，却总是面向cv编程的程序员。 谢谢阅读，无误点赞，有误还望评论区指正。
1.5K30编辑于 2022-11-17 - 来自专栏余生开发
electron-vue———在Electron 中使用Vue Devtools
在Electron 中使用Vue Devtools ·首先在Chrome中安装Vue Devtools； ·在Chrome中打开扩展程序，并且开启开发者模式，这样就可以获取扩展程序的ID，记住这个ID Application Support/Google/Chrome/Default/Extensions/上边的ID"); } 重点是BrowserWindow这一句，这样就在Electron 中添加了Vue Devtools 就能愉快的开发了
3.9K10发布于 2018-10-15 - 来自专栏前端杂谈
vue调试工具vue-devtools安装及使用
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改 4.编译代码 npm run build 5.扩展Chrome插件 Chrome浏览器 > 更多程序 > 拓展程序 点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 6. vue-devtools使用 vue项目, 打开f12, 选择vue就可以使用了. vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试 ? 怎么样, 是不是感觉工作效率提高了呢 温情提示: 1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的 2.安装后, 需要关闭浏览器, 再重新打开, 才能使用
2K80发布于 2018-05-16 - 来自专栏Fantasy的技术小站
Vue.js调试神器vue-devtools的安装
一、前言 在使用 Vue 时，官方推荐我们在浏览器上安装 Vue Devtools。它允许我们在一个更友好的界面中审查和调试 Vue 应用。 二、教程 下载 vue.js插件下载：https://777nx.lanzoue.com/ib5lm0p1nn0d 安装 下载Vue.js devtools的crx文件后，打开Chrome的扩展页面（ extensions/ 或按Chrome菜单图标>更多工具>扩展程序），然后拖放 crx文件到扩展页面安装它 点击“添加拓展程序”完成安装 完成安装点击详情，将允许访问文件网址打开 使用 安装完成之后运行你的vue 开发项目，F12就可以看到这个vue-devtools插件了，可以快速调试了 三、最后 日日夜夜的劳作只为你可以更快乐 嘛咪嘛咪哄~bug通通不见了!
3K20编辑于 2023-05-02 - 来自专栏全栈程序员必看
devtools安装_检测devtools
vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用。 安装: chrome商店直接安装。 手动安装 步骤: 找到vue-devtools的github项目，并将其clone到本地:git clone https://github.com/vuejs/vue-devtools.git 安装项目所需要的 npm install 编译项目文件:npm run build 添加至chrome浏览器:地址(“chrome://extensions/”)进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools >shells下的chrome文件夹(例如:filenames/…/vue-devtools/shells)。
71430编辑于 2022-09-27 - 来自专栏前端框架
你还在用 vue-devtools，快来试试 vite-plugin-vue-devtools，更加丝滑，更加全能！
前言 最近，我发现了 vite-plugin-vue-devtools，我想知道和平时用的浏览器版 Vue Devtools 到底有啥区别？ 于是果断安装了，结果发现比浏览器版香多了！ 浏览器版的 Vue Devtools，大家肯定很熟，就是你在 Chrome 应用商店里安装的那个扩展。 于是呢，vite-plugin-vue-devtools 就横空出世了。 它的思路很简单粗暴： 直接把 Devtools 面板塞进你的网页里！不靠浏览器扩展了！ import { defineConfig } from'vite' import vue from'@vitejs/plugin-vue' import vueDevTools from'vite-plugin-vue-devtools 总结一句话： vite-plugin-vue-devtools 更适合本地开发，浏览器版 Vue Devtools 更适合生产环境排查。 两者搭配着用，体验最好。
1.5K10编辑于 2025-04-30 - 来自专栏JAVA开发专栏
vue-devtools工具的安装和使用
目录 介绍： 1、从github拉取开发工具源码 2、在vue-devtools目录下安装依赖包 3、执行npm run build 4、打开Chrome浏览器，选择更多工具->扩展程序 5、将刚才看到的 chrome目录直接拖拽到上述页面中，就可以看到上成功加载了Vue开发工具 6、打开一个Vue应用的页面 介绍： 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。 1、从github拉取开发工具源码 2、在vue-devtools目录下安装依赖包 cd vue-devtools npm install 3、执行npm run build 看到如下界面，表示成功 此时在vue-devtools目录下会出现一个shells目录，其中有一个chrome目录 4、打开Chrome浏览器，选择更多工具->扩展程序 5、将刚才看到的chrome目录直接拖拽到上述页面中 ，就可以看到上成功加载了Vue开发工具 6、打开一个Vue应用的页面 然后开启对开发工具的支持，此时在原来Chrome的开发者工具中就会出现一个名字为Vue的tab，通过这个tab就可以看到当前Vue应用运行的一些信息
1.6K41编辑于 2022-11-16 - 来自专栏友儿
Vue框架控制台Console提示Download the Vue Devtools extension....
提示： Download the Vue Devtools extension for a better development experience: https://github.com/vuejs /vue-devtools 翻译： 下载Vue Devtools扩展以获得更好的开发体验：https://github.com/vuejs/vue-devtools 解决： 解压 在地址栏输入 chrome
4K20编辑于 2022-09-11 - 来自专栏学院君的专栏
使用 Vue.js Devtools 扩展作为 Vue 应用调试工具
上篇教程学院君给大家简单介绍了 Vue.js 框架，并演示了 Vue.js 的第一个功能特性 —— 数据绑定。 安装扩展 在此之前，我们先来介绍一款 Vue.js 本地开发的调试工具 —— Vue.js Devtools，这是一个浏览器扩展，当前支持 Chrome 和 Firefox 浏览器，你可以在 Chrome 基本使用 如果我们的前端页面使用了 Vue.js 框架，那么安装了 Vue.js Devtools 扩展的浏览器会嗅探到其中的 Vue 实例、组件、事件、路由以及状态。 另外，如果当前 HTML 页面没用使用 Vue 框架，Vue.js Devtools 扩展会处于未激活状态： 可以看到该扩展的颜色是灰色的，同时在开发者工具的标签页也没有 Vue 选项卡，表示该页面没有使用 好了，关于 Vue.js Devtools 的基本使用学院君先简单介绍到这里，在后续教程中，我们将基于它作为开发 Vue 应用的调用工具。
2.8K30编辑于 2023-03-03 - 来自专栏全栈程序员必看
vue devtools如何使用调试_千牛提示opendevtools
上面的动态图演示的是，谷歌浏览器已经安装完 vue-devtools插件的情形。 （注：此情形特指控制台中的黑绿色标识，并非指代码的操作） 第二步： Vue调试神器 vue-devtools 的安装 极速安装Vue调试神器 vue.js devtools（5分钟搞定）—— 点击查看最近安装方法 未安装的情形： 浏览器的控制台会提示你： 下载vue DevTools扩展以获得更好的开发体验；（插件的GitHub地址：https://github.com/vuejs/vue-devtools） 注：Vue.js devtools插件在chrome浏览器安装成功后，在浏览器的右上角会存在一个插件图标。 5.启动vue devtools插件 6.打开vue项目,在控制台选择vue： 7.点击vue，查看数据 可能会遇到的问题 1.在命令行执行npm install时，会长时间停留在fetchMetadata
1.8K30编辑于 2022-11-08 - 来自专栏路过君BLOG from CSDN
vue-devtools安装失败Electron failed to install correctly解决
启动报错 C:\Users\Administrator>vue-devtools C:\Users\Administrator\AppData\Roaming\npm\node_modules@vue \devtools\node_modules\electron\index.js:14 throw new Error(‘Electron failed to install correctly, please [24m\devtools\node_modules\[4melectron[24m\index.js:14:11) at Object. (C:\Users\Administrator\AppData\Roaming\npm\node_modules\[4m@vue[24m\devtools\node_modules\[4melectron (C:\Users\Administrator\AppData\Roaming\npm\node_modules\[4m@vue[24m\devtools\bin.js:2:18) [90m at Module
1.4K20编辑于 2022-04-13 - 来自专栏Devops专栏
Vue 调试工具vue-devtools的安装步骤和使用
安装 Vue.js devtools - 科学上网安装方式 - 推荐: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd hl=zh-CN 点击该链接地址后，显示如下： 使用 使用一个vue代码来调试看看。
68430编辑于 2022-01-17 - 来自专栏自律神仙ScarSu
Devtools 老师傅养成 - Chrome Devtools介绍
本文结构 - 本文相关 - Web Devtool历史 - 按Chrome相关介绍 - Devtools 界面概览 - 几个重要面板简介 - 使用Devtools的几个小技巧 本文共计：1415字1图 预计阅读时间：2min40s 本文相关 本文基于 chrome 浏览器版本 73.0.3683.103（正式版本）总结 本文目的：关于【devtools 能做什么】建立完善的知识结构 ，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 Devtools Sample[1]和 devtools 操作一遍 参考 1：google developers 官方文档[2] 参考 Firebug[7]：2006年诞生，2007年被Firefox开源，当时只有单一的console面板，带有AJAX日志；于2017停用，Firefox的调试工具转为全新的Devtools。 新版发布速度递增 新功能数量递增 稳定性递减 Chrome Devtools 界面概览 F12打开的界面 几个重要面板简介 Elements面板：实时检查和编辑页面的HTML & CSS
1.5K42发布于 2020-10-22 - 来自专栏Devops专栏
Vue 调试工具vue-devtools的安装步骤和使用
安装 Vue.js devtools 点击该链接地址后，显示如下： 使用 使用一个vue代码来调试看看。
77830发布于 2020-03-19
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号